
    <div class="container" id="brush">
        <div class="row">
            <div class="col-md-6">
                <article>
                    <h2 class="tutorial__heading">Simple Brush Chart</h2>
                    <div class="js-brush-chart-container card--chart"></div>
                    <p class="js-date-range date-range is-hidden">
                        Selected from <span class="js-start-date"></span> to <span class="js-end-date"></span><br>
                        <a id="clear-selection" href="#">Clear Selection</a>
                    </p>
                    <p>Brush chart to use with other charts as a time range selector.</p>
                </article>
            </div>
            <div class="col-md-6 sidebar">
                <h3>The code</h3>
                <pre><code class="language-javascript">
brushChart
    .width(containerWidth)
    .height(300)
    .on('customBrushStart', function(brushExtent) {
        // Do something with the brushExtent
    });

brushContainer.datum(dataset).call(brushChart);
                </code></pre>
                <h4>Data Input</h4>
                <p>Check the <a href="/britecharts/global.html#BrushChartData__anchor">data input schema</a> of this chart.</p>
                <h4>Demo Code</h4>
                <p>Read the whole code of this demo <a href="https://github.com/eventbrite/britecharts/blob/master/demos/src/demo-brush.js">in github</a></p>
            </div>
        </div>
    </div>

